<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="跟单">
                <el-input v-model="followOrderNo" placeholder="请输入跟单单号"></el-input>
            </el-form-item>
            <el-form-item label="跟单">
            <el-select v-model="salesmanId" placeholder="请输入业务员">
            </el-select>
       </el-form-item>
            <el-form-item label="送货类别">
                 <el-select v-model="deliveryType" placeholder="请选择送货类别">
                     <el-option label="海运" value="1"></el-option>
                     <el-option label="陆运" value="2"></el-option>
                     <el-option label="空运" value="3"></el-option>
                 </el-select>
            </el-form-item>
           
            <el-form-item label="送货日期">
                <el-date-picker v-model="deliveryDate" type="date" placeholder="请选择送货日期"></el-date-picker>
            </el-form-item>
            
            <el-form-item label="送货单号">
                <el-input v-model="deliveryOrderNo" placeholder="请输入送货单号"></el-input>
            </el-form-item>
            
            <el-form-item label="仓库名称">
                <el-select v-model="warehouseId" placeholder="请选择仓库"></el-select>
            </el-form-item>
            
            <el-form-item label="销售订单编码">
                <el-input v-model="salesOrderNo" placeholder="请输入销售订单编码"></el-input>
            </el-form-item>
            
            <el-form-item label="产品编码">
                <el-input v-model="productCode" placeholder="请输入产品编码"></el-input>
            </el-form-item>
            
            <el-form-item label="产品名称">
                <el-input v-model="productName" placeholder="请输入产品名称"></el-input>
            </el-form-item>
            
            <el-form-item label="质量等级">
                 <el-select v-model="qualityLevel" placeholder="请选择质量等级">
                     <el-option label="A" value="1"></el-option>
                     <el-option label="B" value="2"></el-option>
                     <el-option label="C" value="3"></el-option>
                 </el-select>
            </el-form-item>
            
            <el-form-item label="颜色">
                <el-input v-model="color" placeholder="请输入颜色"></el-input>
            </el-form-item>
            
            <el-form-item label="单位">
                <el-select v-model="unit" placeholder="请选择单位">
                    <el-option label="个" value="1"></el-option>
                    <el-option label="包" value="2"></el-option>
                    <el-option label="盒" value="3"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="客户品名"> 
                    <el-input v-model="customerProductName" placeholder="请输入客户品名"></el-input>
                </el-form-item>
                
                <el-form-item label="状态">
                    <el-select v-model="status" placeholder="请选择状态">
                        <el-option label="待发货" value="1"></el-option>
                        <el-option label="已发货" value="2"></el-option>
                        <el-option label="已收货" value="3"></el-option>
                    </el-select>
                    </el-form-item>

            <el-button type="primary" @click="search" style="margin-bottom: 20px;"><el-icon style="margin-right: 10px;"><Search /></el-icon>搜索</el-button>
        </el-form>
        
        <el-button type="primary" v-perm:management:salesdeliverynote:insert="insert">添加</el-button>
        <el-button type="primary" v-perm:management:salesdeliverynote:update   ="update">修改</el-button>
        <el-button type="primary" v-perm:management:salesdeliverynote:remove="remove">删除</el-button>
        <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>

        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
           
            
            <el-table-column prop="deliveryOrderNo" label="送货单号" width="150"></el-table-column>
           
            <el-table-column prop="salesOrderNo" label="销售订单编码" width="150"></el-table-column>
           
            <el-table-column prop="customerCode" label="客户编码" width="150"></el-table-column>
            
            <el-table-column prop="customerName" label="客户简称" width="150"></el-table-column>
           
            <el-table-column prop="followOrderNo" label="跟单单号" width="150"></el-table-column>
           
            <el-table-column prop="salesmanName" label="业务员" width="150"></el-table-column>
           
            <el-table-column prop="deliveryType" label="送货类别" width="150"></el-table-column>
            
            
            <el-table-column prop="warehouseName" label="仓库名称" width="150"></el-table-column>
            
            <el-table-column prop="productCode" label="销售订单编码" width="150"></el-table-column>
            
            
            <el-table-column prop="productName" label="产品名称" width="150"></el-table-column>
            
            
            <el-table-column prop="productSpec" label="产品规格" width="150"></el-table-column>
            
            <el-table-column prop="status" label="状态" width="150"></el-table-column>
            
            <el-table-column prop="material" label="材质" width="150"></el-table-column>

            
            <el-table-column prop="qualityLevel" label="质量等级" width="150"></el-table-column>
            
            <el-table-column prop="color" label="颜色" width="150"></el-table-column>
            
            <el-table-column prop="unit" label="单位" width="150"></el-table-column>

            
            <el-table-column prop="orderNum" label="订单数" width="150"></el-table-column>

           
            <el-table-column prop="backOrderNum" label="备品数" width="150"></el-table-column>
            
            
            <el-table-column prop="unitPrice" label="单价" width="150"></el-table-column>

            
            <el-table-column prop="deliveryNum" label="出货数" width="150"></el-table-column>

       
            <el-table-column prop="weight" label="重量" width="150"></el-table-column>
            
            <el-table-column prop="taxRate" label="税率" width="150"></el-table-column>
            
            <el-table-column prop=" materialPrice" label="金额" width="150"></el-table-column>
            
            
            <el-table-column prop="additionalFee" label="附加费" width="150"></el-table-column>
            
            <el-table-column prop="remark" label="备注" width="150"></el-table-column>
           
            <el-table-column prop="orderNum" label="件数" width="150"></el-table-column>
           
            <el-table-column prop="sku" label="SKU" width="150"></el-table-column>
          
            <el-table-column prop="customerProductSpec" label="客户规格" width="150"></el-table-column>
          
            <el-table-column prop="customerProductName" label="客户品名" width="150"></el-table-column>
          
            <el-table-column prop="productionOrderNo" label="生产工单编码" width="150"></el-table-column>
          
            
            <el-table-column prop="createdBy" label="创建者" width="150"></el-table-column>
          
            
            <el-table-column prop="createdTime" label="创建时间" width="150"></el-table-column>
           
            <el-table-column prop="updatedBy" label="更新者" width="150"></el-table-column>
           
            <el-table-column prop="updatedTime" label="更新时间" width="150"></el-table-column>
           
           
            <el-table-column label="操作" width="200px">
                <template #default="scope">
                    <el-button :row="scope.row" type="primary" v-perm:management:salesorder:update="update">修改</el-button>
                    <el-button type="danger" size="mini" :row="scope.row" v-perm:management:salesorder:remove="remove" @click="deleteSingle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <el-dialog :destroy-on-close="true"
            :title="title"
            v-model="visible">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>
        

    </div>
</template>

<script setup>

import { ref } from 'vue'

let data = ref({})
let visible = ref(false)
let title = ref('')

const insert = () => {
    visible.value = true
    title.value = '添加订单'
}
const update = (row) => {
    visible.value = true
    title.value = '修改订单'
    data.value = row
}

// 初始化状态（设置默认值）
const deliveryOrderNo= ref('')
const salesOrderNo= ref('')
const customerCode= ref('')
const customerName= ref('')
const followOrderNo= ref('')
const salesmanName= ref('')
const deliveryType= ref('')
const warehouseName= ref('')
const productCode= ref('')
const productName= ref('')
const productSpec= ref('')
const status= ref('')
const material= ref('')
const qualityLevel= ref('')
const color= ref('')
const unit= ref('')
const orderNum= ref('')
const sku= ref('')
const customerProductSpec= ref('')
const customerProductName= ref('')
const productionOrderNo= ref('')
const createdBy= ref('')
const createdTime= ref('')
const updatedBy= ref('')
const updatedTime= ref('')
const deliveryDate= ref('')





// 示例订单数据
let salesorder = ref([
    {
        deliveryOrderNo: 'DO123456',
        salesOrderNo: 'SO123456',
        customerCode: 'CUST001',
        customerName: '客户A',
        followOrderNo: 'FO123456',
        salesmanName: '张三',
        deliveryType: '海运',
        warehouseName: '主仓库',
        productCode: 'P001',
        productName: '产品A',
        productSpec: '规格A',
        status: '待发货',
        material: '金属',
        qualityLevel: 'A',
        color: '红色',
        unit: '个',
        orderNum: 10,
        backOrderNum: 0,
        unitPrice: 100,
        deliveryNum: 10,
        weight: 1,
        taxRate: 10,
        materialPrice: 1000,
        additionalFee: 50,
        remark: '急需处理',
        sku: 'SKU001',
        customerProductSpec: '客户规格A',
        customerProductName: '客户产品A',
        productionOrderNo: 'PO001',
        createdBy: '李四',
        createdTime: '2023-01-01 10:00:00',
        updatedBy: '李四',
        updatedTime: '2023-01-02 12:00:00',
    },
    {
        deliveryOrderNo: 'DO987654',
        salesOrderNo: 'SO987654',
        customerCode: 'CUST002',
        customerName: '客户B',
        followOrderNo: 'FO987654',
        salesmanName: '王五',
        deliveryType: '陆运',
        warehouseName: '副仓库',
        productCode: 'P002',
        productName: '产品B',
        productSpec: '规格B',
        status: '已发货',
        material: '塑料',
        qualityLevel: 'B',
        color: '蓝色',
        unit: '箱',
        orderNum: 5,
        backOrderNum: 1,
        unitPrice: 50,
        deliveryNum: 5,
        weight: 0.5,
        taxRate: 5,
        materialPrice: 250,
        additionalFee: 20,
        remark: '正常发货',
        sku: 'SKU002',
        customerProductSpec: '客户规格B',
        customerProductName: '客户产品B',
        productionOrderNo: 'PO002',
        createdBy: '赵六',
        createdTime: '2023-01-03 14:00:00',
        updatedBy: '赵六',
        updatedTime: '2023-01-04 16:00:00',
    }
]);


let selectedRows = ref([]);

const handleSelectionChange = (val) => {
    selectedRows.value = val;
};


const bulkDelete = () => {
    if (confirm("确定要删除选中的订单吗？")) {
        salesorder.value = salesorder.value.filter(order => !selectedRows.value.includes(order));
        selectedRows.value = []; // 清空选中项
    }
};

// 单行删除方法
const deleteSingle = (row) => {
    if (confirm("确定要删除该订单吗？")) {
        salesorder.value = salesorder.value.filter(order => order.orderNo !== row.orderNo);
    }
};
</script>

<style  scoped>
/* 样式部分，可以根据需求添加 */
.el-select {
    width: 150px;
}
</style>




